<template>
    <van-nav-bar
        title="商品分类"
    />
  <van-tree-select
    v-model:main-active-index="activeIndex"
    height="100%"
    :items="productList"
    @click-nav="changeActive($event)"
  >
    <template #content>
      <div class="good" v-for="(item, index) in childrenList" :key="index" @click="select(item.id)">
        <div style="margin-left:5px">
          <van-image width="80" height="80" :src="item.cover_cdn" />
        </div>
        <div style="display:flex; flex-direction: column;align-items: center;">
        <span class="name">{{ item.name }}</span>
        <span class="price">{{ item.price }}元</span>
        </div>
      </div>
    </template>
  </van-tree-select>
  <Tab />
</template>
<script>
import Tab from "@/components/common/Tab.vue";
export default {
  components: {
    Tab,
  },
  data() {
    return {
      activeIndex: 0,
      productList: [],
      childrenList: [],
    };
  },
  created() {
    this.allpro();
  },
  methods: {
    async allpro() {
      let result = await this.$api.allproduct();
      let proList = result.data;
      let text = [];
      let id = [];
      proList.map((item) => {
        if (text.indexOf(item.type.name) === -1) {
          this.productList.push({
            text: item.type.name,
            id: item.type.id,
            children: [],
          });
          text.push(item.type.name);
          id.push(item.type.id);
        }
      });
      this.productList.map((item) => {
        proList.map((items) => {
          if (item.text == items.type.name) {
            item.children.push(items);
          }
        });
      });
      this.childrenList = this.productList[0].children;
    // console.log(this.$route.query.typeid)
    //   if(this.$route.query.typeid){
    //      this.productList.map((v, index) => {
    //     // console.log(index)
    //     if (Object.values(v)[1] == this.$route.query.typeid) {
    //       // console.log(index);
    //       this.changeActive(index);
    //     }
    //   });
    //   }
     
    },
    changeActive(val) {
      console.log(val)
      this.activeIndex = val;
      this.childrenList = this.productList[val].children;
    },
    select(val) {
      console.log(val)
      this.$router.push({path:'/product/product/info',query:{proid:val}})
    },
  },
};
</script>
<style>
.van-tree-select__nav{
  background-color: unset;
}
.van-tree-select__content{
  padding: 5px;
}
.van-image__img, .van-image__error, .van-image__loading{
  margin-left: 10px;
}
.good {
  display: flex;
  width: 90%;
  justify-content: space-around;
  align-items: center;
  margin: 4px 0px;
  text-align: center;
}
.good .name {
  margin-left: 10px;
  overflow: hidden;
  width: 150px;
  font-size: 15px;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.price {
  color: rgb(206, 149, 51);
}
</style>
